<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .baidu-home {
            margin: 0 auto;
            text-align: center;
        }

        li {
            list-style: none;
            margin-left: 4px;
        }

        .baidu-home .nav ul {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .baidu-home .nav ul li:nth-child(2) a {
            text-decoration: none;
            color: black;
            font-weight: bold;
        }

        .search {
            margin-bottom: 30px;
        }

        .search input {
            width: 420px;
            height: 30px;
        }

        .more,
        .addr {
            margin-bottom: 30px;
        }

        .footer p:last-child {
            font-size: 15px;
        }
    </style>
</head>

<body>
    <div class="baidu-home">
        <img src="./img/logo.gif" alt="百度">
        <div class="nav">
            <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">网页</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">知道</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">地图</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <button>百度一下</button>
        </div>
        <div class="more">
            <a href="#">百科</a>
            <a href="#">文库</a>
            <a href="#">hao123&nbsp;|</a>
            <a href="#">更多&gt;&gt;</a>
        </div>
        <div class="addr">
            <img src="./img/icon.jpg" alt="">
            <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
        </div>
        <div class="footer">
            <p>
                <a href="#">把百度设为主页</a>
                <a href="#">安装百度卫士</a>
            </p>
            <p>
                <a href="#">加入百度推广&nbsp;|&nbsp;</a><a href="#">搜索风云榜&nbsp;|&nbsp;</a><a href="#">关于百度&nbsp;|&nbsp;</a><a
                    href="#">About Baidu</a>
            </p>
            <p>&copy;2021 Baidu 使用百度前必读 京ICP证030173号</p>
        </div>
    </div>
</body>

</html>